<template>
  <div id="app">
    <router-view></router-view>
    <div class="router">
      <router-link
        v-for="item in router"
        :key="item.path"
        :to="{ path: '/' + item.path }"
      >
        <img :src="item.content" />
      </router-link>
    </div>
  </div>
</template>
<script>
import navBar from "./components/navBar.vue";
export default {
  data() {
    return {
      router: [
        {
          path: "",
          content: require("./assets/index.png"),
        },
        {
          path: "sort",
          content: require("./assets/sort.png"),
        },
        {
          path: "jingxi",
          content: require("./assets/jingxi.png"),
        },
        {
          path: "shopping",
          content: require("./assets/shoppingCart.png"),
        },
        {
          path: "login",
          content: require("./assets/login.png"),
        },
      ],
    };
  },
  comments: {
    navBar,
  },
};
</script>
<style>
* {
  margin: 0px;
  padding: 0px;
}
.router {
  position: fixed;
  display: flex;
  flex-grow: 1;
  width: 100%;
  height: 50px;
  bottom: 0px;
  background-color: white;
  box-shadow: 0px 2px 1px 2px;
}
.router img {
  width: 64px;
}
</style>
